<template>
  <div class="home">
    <p>{{ msg }}</p>
    <p>{{ count }}</p>
    <p>{{ shopname }}</p>
    <p>{{ listDatas[0].title }}</p>
    <button @click="changeObj">修改obj的值</button>
  </div>
</template>

<script setup>
// @ is an alias to /src
// 引入reactive使用
import { reactive, toRefs } from 'vue';
// reactive定义复杂数据类型
let obj = reactive({
  msg: '信息',
  count: 10,
  shopname: '名称',
  listDatas: [{
    id: '001',
    title: '电脑'
  },
  {
    id: '002',
    title: '手机'
  }]
})
// 使用torefs变成响应式
let { msg, count, shopname, listDatas } = toRefs(obj);

let changeObj = () => {
  count.value = 100;
  shopname.value = '修改名称'
  listDatas.value[0].title = 'ipad'
  console.log(obj);
}

</script>
